import { getModelData } from "@/utils/utils";
import { Button, Form, Input } from "antd";
import React, { useCallback, useEffect, useState } from "react";
import { getSystemParamsToValue } from "@/utils/systemparams";

const PwdForm = (props: any) => {
  const [regex, setRegex] = useState("");
  const [placeholder, setPlaceholder] = useState("");

  const {
    showBottomBtn,
    loading,
    dispatch,
    dispatchType,
    resetPwdApi,
    successCallback,
    form,
    form: { getFieldValue, getFieldDecorator }
  } = props;

  const formItemLayout = {
    labelCol: {
      xs: { span: 6 },
      sm: { span: 8 }
    },
    wrapperCol: {
      xs: { span: 18 },
      sm: { span: 16 }
    }
  };

  const commonRules = [
    {
      pattern: new RegExp(regex),
      message: placeholder
    }
  ];

  // 密码校验
  const checkSamePwd = useCallback((rule, value, callback) => {
    const newPassword = getFieldValue("newPassword");
    if (value.length >= 6 && value.length <= 16) {
      if (value === newPassword) {
        callback();
      } else {
        callback("两次密码输入不一致");
      }
    } else {
      callback();
    }
  }, []);

  //保存修改
  const handleSubmit = useCallback(() => {
    form.validateFields(async (err: any, values: any) => {
      if (err) {
        return;
      }
      if (resetPwdApi) {
        const res = await resetPwdApi(values);
        if(res){
            successCallback && successCallback()
        }
        return
      }
      dispatch({
        type: dispatchType,
        payload: {
          params: values
        }
      });
    });
  }, [resetPwdApi]);

  useEffect(() => {
    init()
  }, []);

  const init = useCallback(async () => {
    let _placeholder = await getSystemParamsToValue('USER_PASSWORD_VALIDATE_PROMPT');
    if (_placeholder) setPlaceholder(_placeholder);
    let _regex = await getSystemParamsToValue('USER_PASSWORD_REGEX');
    if (_regex) setRegex(_regex);
  }, [])

  return (
    <Form layout="horizontal" className="fixed-label-from-h" labelAlign="right">
      <Form.Item label={"原密码"} {...formItemLayout}>
        {getFieldDecorator("oldPassword", {
          rules: [
            {
              required: true,
              message: "请输入原密码"
            },
            ...commonRules
          ]
        })(
          <Input.Password
            placeholder={"请输入原密码"}
            size="small"
            style={{
              width: "100%"
            }}
          />
        )}
      </Form.Item>
      <Form.Item label={"新密码"} {...formItemLayout}>
        {getFieldDecorator("newPassword", {
          rules: [
            {
              required: true,
              message: "请输入新密码"
            },
            ...commonRules
          ]
        })(
          <Input.Password
            size="small"
            placeholder={placeholder}
            style={{
              width: "100%"
            }}
          />
        )}
      </Form.Item>
      <Form.Item label={"确认新密码"} {...formItemLayout}>
        {getFieldDecorator("confirmPassword", {
          rules: [
            {
              required: true,
              message: "请再次输入密码"
            },
            ...commonRules,
            ,
            {
              validator: checkSamePwd
            }
          ]
        })(<Input.Password size="small" placeholder={placeholder} />)}
      </Form.Item>
      <Form.Item style={{ paddingLeft: "120px" }}>
        {showBottomBtn && (
          <Button
            size="small"
            type="primary"
            loading={loading}
            onClick={handleSubmit}
          >
            {"修改"}
          </Button>
        )}
      </Form.Item>
    </Form>
  );
};
export default Form.create()(PwdForm);
// export default PwdForm
